<template>
  <div class="shopDetail">
      <van-nav-bar title="我的商品" left-arrow @click-left="$router.history.go(-1)">
        <span slot='left' class="topleftIcon"><img src='../../../public/images/qt_75.png'/></span>
      </van-nav-bar>
      <div class="topMenu flex_between">
        <span>谁想要</span>
        <span>查看更多<img src='../../../public/images/down.png'/></span>
      </div>
      <div class="peopleMessage">
        <img src='../../../public/images/qt_14.png' class="peoplePho l"/>
        <div class="center l">
          <h1>张小晨</h1>
          <div><img src="../../../public/images/huizhang.png"/>信用值 &nbsp80 </div>
        </div>
        <div class="r tishi">
          <h2>2019-7-5 12:34</h2>
          <p>已完成</p>
        </div>
        <div class="clear"></div>
      </div>
      <div class="comment mb-30">
        <div class="commentInfo">
          <p>东西还可以，和描述的相符，卖主人也很好，帮我直接拿到宿舍楼下了</p>
          <div class="commentIcon flex">
            <img src="../../../public/images/qt_29.png"/>
            <img src="../../../public/images/qt_29.png"/>
            <img src="../../../public/images/qt_29.png"/>
          </div>
        </div>
        <div class="bottom">
          <div class="peopleNum l">回复</div>
          <div class="otherNum2 r"><img src="../../../public/images/qt_83.png"/>198</div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="shopMessage">
        <div class="title">
          <p class="l">全套线装四大名著正版</p>
          <div class="publicTags l">8成新</div>
          <div class="clear"></div>
        </div>
        <p class="time">2019年06月25日 发布</p>
        <div class="price">
          <p class="l">￥199.00</p>
          <div class="tags_1 l">不讲价</div>
          <div class="clear"></div>
        </div>
        <div class="navs mt-10 flex_between">
          <div class="navTxt">
            <p class="hide_otherThree">这里是商品的详这里是商品的详情介这里是商品的详情介这里是商品的详情介情介这里是商品的详情介这里是商品的详情介</p>
          </div>
          <img src="../../../public/images/my_01.png" />
        </div>
        <div class="bot">
          <div class="l">868人看到</div>
          <div class="otherNum1 ml-70 l"><img src="../../../public/images/qt_80.png"/>198</div>
          <div class="otherNum2 ml-70 l"><img src="../../../public/images/qt_78.png"/>19</div>
          <!-- <div class="jubao r"><img src="../../../public/images/qt_83.png"/>举报</div> -->
          <div class="clear"></div>
        </div>
      </div>
      <div class="liuyanTitle flex_between">
        <h3>全部留言</h3>
        <p>19条</p>
      </div>
      <ul class="liuyanList">
        <li class="flex_between mb-20">
          <div class="left"><img src='../../../public/images/qt_14.png' width="100%" height="100%"/></div>
          <div class="right ml-30">
            <div class="rightTop">
              <div class="name l hide_other">无忧无虑无忧无虑无忧无虑</div>
              <div class="r hf">回复</div>
              <div class="r mr-60 otherNum1"><img src="../../../public/images/qt_80.png"/>198</div>
              <div class="clear"></div>
            </div>
            <div class="txt">不知道是不是盗版啊，我喜欢四大名著，但是我讨厌盗版</div>
            <ul>
              <li>瞎子：<span>我也是我也是瞎子我也是瞎子我也是瞎子我也是我也是瞎子我也是瞎子我也是瞎子我也是</span></li>
              <li>我是张三：<span>你电话号码是</span></li>
            </ul>
          </div>
        </li>
        <li class="flex_between mb-20">
          <div class="left"><img src='../../../public/images/qt_14.png' width="100%" height="100%"/></div>
          <div class="right ml-30">
            <div class="rightTop">
              <div class="name l hide_other">无忧无虑无忧无虑无忧无虑</div>
              <div class="r hf">回复</div>
              <div class="r mr-60 otherNum1"><img src="../../../public/images/qt_80.png"/>198</div>
              <div class="clear"></div>
            </div>
            <div class="txt">不知道是不是盗版啊，我喜欢四大名著，但是我讨厌盗版</div>
            <ul>
              <li>瞎子：<span>我也是我也是瞎子我也是瞎子我也是瞎子我也是我也是瞎子我也是瞎子我也是瞎子我也是</span></li>
              <li>我是张三：<span>你电话号码是</span></li>
            </ul>
          </div>
        </li>
      </ul>
      <div class="menu">
        <div class="del l"><img src="../../../public/images/qt_65.png"/> 删除记录</div>
        <div class="sure btn r">已完成</div>
        <!-- <div class="jiaoyi btn r">继续交易</div> -->
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      
    }
  },
  methods:{
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .shopDetail{background-color: #F5F5F5;}
  .topMenu{font: 0.3rem/0.4rem '微软雅黑';color: #333333;padding: 0.3rem 0.3rem 0 0.3rem;background-color: #fff;}
  .topMenu span:nth-of-type(2){color: #999;font-size:0.24rem;}
  .topMenu span:nth-of-type(2) img{width: 0.24rem;height: 0.24rem;display: inline-block;margin: 0 0 0.05rem 0.1rem;}
  .peopleMessage{padding: 0.3rem;background-color: #fff;}
  .peopleMessage .peoplePho{width: 0.8rem;height: 0.8rem;display: block;}
  .peopleMessage .center{margin-left: 0.28rem;}
  .peopleMessage .center h1{font: 0.3rem/0.4rem '微软雅黑';color: #4AACE9;}
  .peopleMessage .center div{font: 0.24rem/0.4rem '微软雅黑';color: #999999;}
  .peopleMessage .center div img{display: inline-block;width:0.24rem;height: 0.24rem;margin: 0 0.1rem 0.05rem 0;}
  .peopleMessage .tishi h2{font: 0.24rem/0.4rem '微软雅黑';color: #999999;text-align: right;}
  .peopleMessage .tishi p{font: 0.24rem/0.4rem '微软雅黑';color: #29C95E;text-align: right;}

  .comment{padding:0.3rem;background-color: #fff;}
  .comment p{font: 0.28rem/0.4rem '微软雅黑';color: #333333;}
  .comment .commentIcon{margin: 0.23rem 0;}
  .comment .commentIcon img{width: 0.28rem;height: 0.34rem;margin-right: 0.21rem;display: block;}

  .comment .bottom{font: 0.24rem/0.34rem '微软雅黑';color: #AAAAAA;}
  .comment .bottom .otherNum1{float: right;}
  .comment .bottom img{display: inline-block;width: 0.34rem;height: 0.34rem;margin-right: 0.1rem;}
  .shopMessage{padding: 0.3rem;position: relative;background-color: #fff;}
  .shopMessage::before{content: '已完成';background-color: #CCCCCC;width: 0.88rem;height: 0.42rem;text-align: center;border-bottom-left-radius: 0.21rem;font: 0.2rem/0.42rem '微软雅黑';position: absolute;right: 0;top: 0;color: #fff;}
  .shopMessage .title{font: 0.42rem/0.6rem '微软雅黑';color: #333333;}
  .shopMessage .title p{display: inline-block;}
  .shopMessage .title .publicTags{margin-top: 0.15rem;}
  .shopMessage .time{font: 0.24rem/0.4rem '微软雅黑';color: #999;}
  .shopMessage .price p{font: 0.48rem/0.8rem '微软雅黑';color: #E63D40;display: inline-block;}
  .shopMessage .price .tags_1{border-radius: 0.18rem;background-color: #EDF0F2;text-align: center;color: #999999;font: 0.18rem/0.36rem '微软雅黑';width: 0.82rem;height: 0.36rem;margin-top: 0.22rem;margin-left: 0.24rem;}
  .shopMessage .navs .navTxt{height:1.65rem;flex: 1;border: 2px solid #DDDDDD;box-sizing: border-box;}
  .shopMessage .navs .navTxt p{font: 0.28rem/0.34rem '微软雅黑';color: #333333;margin: 0.26rem;}
  .shopMessage .navs img{width:2.14rem;height:1.65rem;display: block;}
  .shopMessage .bot{font: 0.24rem/0.4rem '微软雅黑';color:#AAAAAA;margin-top: 0.34rem;}
  .shopMessage .bot img{width: 0.34rem;height: 0.34rem;display: inline-block;margin:0 0.1rem 0.1rem;}
  .liuyanTitle{padding:0.28rem;background-color: #fff;font: 0.3rem/0.5rem '微软雅黑';}
  .liuyanTitle h3{color: #000;}
  .liuyanTitle p{color: #AAAAAA;}
  .liuyanList{padding: 0.3rem;background-color: #fff;margin-bottom: 1.2rem;}
  .liuyanList>li .left{width: 0.7rem;height: 0.7rem;}
  .liuyanList>li .right{flex: 1;}
  .liuyanList>li .rightTop {font: 0.24rem/0.7rem '微软雅黑';color: #AAAAAA;}
  .liuyanList>li .rightTop .otherNum1{}
  .liuyanList>li .rightTop .otherNum1 img{width: 0.3rem;height: 0.3rem;display: inline-block;margin: 0.2rem;}
  .liuyanList>li .rightTop .name{color: #4AACE9;font: 0.32rem/0.7rem '微软雅黑';width: 3rem;}
  .liuyanList>li .txt{margin: 0.28rem 0;font: 0.34rem/0.5rem '微软雅黑';color: #323333;}
  .liuyanList>li ul{background-color: #F7F7F7;padding: 0.21rem;}
  .liuyanList>li ul li{font: 0.3rem/0.5rem '微软雅黑';color: #929292;}
  .liuyanList>li ul li span{color: #323333;}
  .menu{position: fixed;left: 0;bottom: 0;background-color: #fff;width: 100%;border-top: 1px solid #F7F7F7;}
  .menu .del{margin-left: 0.62rem;font-size: 0.26rem;line-height: 1.2rem;color: #333333;}
  .menu .del img{width: 0.3rem;height: 0.28rem;display: inline-block;margin: 0 0.1rem 0.05rem 0;}
  .menu .btn{width: 1.88rem;height: 0.8rem;border-radius: 0.4rem;text-align: center;font: 0.3rem/0.8rem '微软雅黑';margin-top: 0.2rem;color: #fff;}
  .menu .jiaoyi{background-color: #F88222;margin-right: 0.42rem;}
  .menu .sure{background-color: #CCCCCC;margin-right: 0.3rem;}
</style>
